<template>
  <el-scrollbar class="side-bar-container" :class="{ 'is-collapse': collapse }">
    <vab-logo :style="{ 'display': (collapse && $route.name) || collapse == 'Index' ? 'none' : '' }" />
    <el-menu :background-color="variables['menu-background']" :text-color="variables['menu-color']"
      :active-text-color="variables['menu-color-active']" :default-active="activeMenu" :collapse="collapse"
      :collapse-transition="false" :default-openeds="defaultOpens" :unique-opened="uniqueOpened" mode="vertical">
      <template v-for="route in routes">
        <vab-side-bar-item :key="route.path" :full-path="route.path" :item="route" />
      </template>
    </el-menu>
  </el-scrollbar>
</template>
<script>
import variables from '@/styles/variables.scss'
import { mapGetters } from 'vuex'
import { defaultOopeneds, uniqueOpened } from '@/config'

export default {
  name: 'VabSideBar',
  data() {
    return {
      uniqueOpened,
    }
  },
  mounted() {

  },
  computed: {
    ...mapGetters({
      collapse: 'settings/collapse',
      routes: 'routes/routes',
    }),
    defaultOpens() {
      if (this.collapse) {
      }
      return defaultOopeneds
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    variables() {
      return variables
    },
  },
}
</script>
<style lang="scss" scoped>
@mixin active {
  &:hover {
    color: $base-color-white;
    background-color: $base-menu-background-active !important;
  }

  &.is-active {
    color: $base-color-white;
    background-color: $base-menu-background-active !important;
  }
}

.side-bar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: $base-z-index;
  width: $base-left-menu-width;
  height: 100vh;
  overflow: hidden;
  background: $base-menu-background;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  transition: width $base-transition-time;

  &.is-collapse {
    width: $base-left-menu-width-min;
    border-right: 0;

    ::v-deep {
      .el-menu {
        transition: width $base-transition-time;
      }

      .el-menu--collapse {
        border-right: 0;

        .el-submenu__icon-arrow {
          right: .4rem !important;
          margin-top: -0.03rem;
        }

        .el-menu-item,
        .el-submenu {
          text-align: center;
        }
      }
    }
  }

  ::v-deep {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }

    .el-menu {
      border: 0;

      .vab-fas-icon {
        padding-right: .1rem;
        font-size: .2rem !important;
        display: inline-block;
      }

      .vab-remix-icon {
        padding-right: .03rem;
        font-size: $base-font-size-default + 2;
      }
    }

    .el-menu-item,
    .el-submenu__title {
      height: $base-menu-item-height;
      line-height: $base-menu-item-height;
      vertical-align: middle;
      // padding: 0 20px !important;
      font-size: $base-font-size-bigger;
      box-sizing: border-box;
    }

    .el-submenu__icon-arrow {
      right: $base-sidebar-width !important;
    }
  }

  ::v-deep {
    .el-menu-item {
      &:hover {
        color: $base-menu-background-active !important;
      }

      &.is-active {
        color: $base-menu-background-active !important;
      }

      svg {
        position: relative;
        left: .15rem;
        top: .02rem;
      }

      span {
        margin-left: .2rem;
      }
    }

    .el-menu-level-1.is-active:not(.is-opened),
    .el-menu-level-1.is-opened>div {
      color: $base-color-white !important;
      // border-left: 10px solid #fff;
      // background-color: $base-color-default !important;
      background-image: linear-gradient(to right, $base-color-white 5%, $base-color-default 5%);
    }

    .el-menu-level-0.is-active:not(.is-opened),
    .el-menu-level-0.is-opened>div {
      color: $base-color-white !important;
      // border-left: 10px solid #fff;
      // background-color: $base-color-default !important;
      background-image: linear-gradient(to right, $base-color-white 5%, $base-color-default 5%);
    }

    .el-menu-level-0.is-active:not(.is-opened),
    .el-menu-level-0.is-opened {
      .el-menu-level-1.is-active {
        color: $base-menu-background-active !important;
        background-image: none;
        position: relative;

        &::before {
          position: absolute;
          content: '';
          width: .1rem;
          height: .1rem;
          border-radius: 100%;
          background-color: $base-menu-background-active;
          left: 44px;
          bottom: .19rem;
        }
      }
    }

    .el-menu-level-3 {
      span {
        margin-left: .20rem;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          width: .10rem;
          height: .10rem;
          border-left: .02rem solid $base-color-white;
          border-bottom: .02rem solid $base-color-white;
          left: -.16rem;
          bottom: .08rem;
        }
      }

      &.is-active {
        span::before {
          border-left: .02rem solid $base-menu-background-active;
          border-bottom: .02rem solid $base-menu-background-active;
        }
      }
    }

    .el-menu-level-2.is-active,
    .el-menu-level-2.is-opened>div {
      color: $base-menu-background-active !important;
      position: relative;

      &::before {
        position: absolute;
        content: '';
        width: .1rem;
        height: .1rem;
        border-radius: 100%;
        background-color: $base-menu-background-active;
        left: 44px;
        bottom: .19rem;
      }
    }

    .el-submenu__title {
      svg {
        position: relative;
        left: .15rem;
        top: .02rem;
      }

      span {
        margin-left: .2rem;
      }
    }
  }
}

::v-deep .el-scrollbar__view {
  padding-top: $base-logo-height;
}
</style>
